<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>22001010205白博文-12.12页面</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/goods.css">
    <link rel="stylesheet" href="./css/tabbar.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/12.css">
<body>
    <div class="bai_header">
        <span></span>
        <div class="bai_header_search">
            <span class="iconfont icon-sousuo"></span>
            <input class="bai_header_search_input" type="text" placeholder="macbookm4pro">
        </div>
        <span class="iconfont icon-gengduo"></span>
    </div>
    <div class="bai_coupon">
        <div class="bai_coupon_card">
            <div class="bai_coupon_card_title">
                <span class="bai_coupon_card_title_text">
                    官方优惠券
                </span>
                <span class="bai_coupon_card_title_content">666元大促券</span>
            </div>
            <div class="bai_coupon_card_content">
                <div class="bai_coupon_card_content_item">
                    <span class="bai_coupon_card_content_item_text">¥5</span>
                    <div class="bai_coupon_card_content_item_button">去领取</div>
                </div>
                <div class="bai_coupon_card_content_item">
                    <span class="bai_coupon_card_content_item_text">¥15</span>
                    <div class="bai_coupon_card_content_item_button">去领取</div>
                </div>
                <div class="bai_coupon_card_content_item">
                    <span class="bai_coupon_card_content_item_text">¥30</span>
                    <div class="bai_coupon_card_content_item_button">去领取</div>
                </div>
                <div class="bai_coupon_card_content_item">
                    <span class="bai_coupon_card_content_item_text">¥45</span>
                    <div class="bai_coupon_card_content_item_button">去领取</div>
                </div>
                <div class="bai_coupon_card_content_item">
                    <span class="bai_coupon_card_content_item_text">¥99</span>
                    <div class="bai_coupon_card_content_item_button">去领取</div>
                </div>
                =
            </div>
        </div>
    </div>
    <div class="bai_swiper">
        <div class="swiper slide">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/swiper1.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/swiper2.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/swiper3.jpg" />
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="bai_goods">

    </div>
    <div style="height: 60px;background-color: #fff;"></div>
    <div class="bai-tabbar">
        <a href="./index.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-shouye"></span>
                <span class="bai-tabbar-item-text">首页</span>
            </section>
        </a>
        <a href="./12.html">
            <section class="bai-tabbar-item" style="color: #e3685c;">
                <span class="iconfont icon-1212"></span>
                <span class="bai-tabbar-item-text">12.12</span>
            </section>
        </a>
        <a href="./liaotian.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-chat"></span>
                <span class="bai-tabbar-item-text">聊天</span>
            </section>
        </a>
        <a href="./wode.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-gerenzhongxin-zhihui"></span>
                <span class="bai-tabbar-item-text">我的</span>
            </section>
        </a>
    </div>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script>
        const goods = document.querySelector('.bai_goods');
     const renderHtml = (data) => {
        console.log(data,'data');
        goods.innerHTML = data.map((item)=>{
            return(
                `
                 <div class="bai_goods_item">
            <img src=${item.img} class="bai_goods_item_img"/>
            <p class="bai_goods_item_title">${item.title}</p>
            <div class="bai_goods_item_content">
                <span class="bai_goods_item_content_price">¥${item.price}</span>
                <span class="bai_goods_item_content_quantity">已有${item.quantity}玩家购买</span>
            </div>
        </div>
                `
            );
        }).join("");
    }
     const getData = async () =>{
        let resp = await fetch('http://localhost:3000/goods3');
        let result = await resp.json();
        renderHtml(result);
        
    }
    getData();
    </script>
</body>

</html>